<template>
  <view class="good-item">
    <view class="item-container">
      <view
        class="item"
        v-for="item in configuration"
        :key="item.name"
        :class="{ primary: item.type == 'primary' }"
        @click="returnfunclick(item)"
      >
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    configuration: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    returnfunclick(item) {
      this.$emit("callback", item);
    },
  },
};
</script>

<style scoped lang="scss">
.good-item {
  display: flex;
  align-items: center;
  height: 90rpx;
  background: #f2f3f5;
  padding: 20rpx;
  position: fixed;
  width: calc(100% - 40rpx);
  bottom: 0;
  z-index: 2;

  .item-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20rpx;
  }

  .item {
    flex: 1;
    height: 90rpx;
    background: #ffffff;
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #1580f1;
  }
  
  .primary {
    background: #409eff;
    color: #fff;
  }
}
</style>
